<template>

    <div>
        <h1>添加数据</h1>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="标题">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input type="textarea" v-model="form.describe"></el-input>
            </el-form-item>

            <el-form-item label="文件">
                <el-upload
                    class="upload-demo"
                    :action="action"
                    :on-success="success"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <!--<el-button>取消</el-button>-->
            </el-form-item>
        </el-form>
    </div>

</template>

<script>

    'use strict';

    import httpUtil from '../../utils/js/HttpUtil'

    export default {
        name: "Add",
        props: {},
        data() {
            return {
                httpUtil,
                form: {
                    title: '',
                    describe: '',
                },
                fileList: [],
                fileMap:[],
                action: httpUtil.getParam().BASE_HTTP + '/album/uploadImg',
                prefix: 'http://' + window.location.hostname + ':8889/'
            }
        },
        computed: {},
        methods: {
            onSubmit() {
                if(this.fileMap.length <= 0) {
                    this.$message.error('请选择文件');
                    return;
                }
                let fileIds = '';
                Object.keys(this.fileMap).forEach(fileId => {
                    fileIds += ',' + fileId;
                });

                this.httpUtil.xhrAll(this, [
                    this.httpUtil.xhrObject(httpUtil.getParam().RequestMethod.POST, 'album/addAlbum', {
                        title: this.form.title,
                        describe: this.form.describe,
                        fileIds: fileIds.substr(1)
                    })
                ], (data) => {
                    if(data.success) {
                        this.$message.success(data.message);
                        this.$router.push({
                            path: 'list',
                        })
                    }else {
                        this.$message.error(data.message);
                    }
                });
            },
            success(data) {
                this.fileMap[data.data.fileId] = data.data;
                this.$message.success(data.message);
            },
            handleRemove(file, fileList) {
                let fileId = 0;
                if(file.fileId) {
                    fileId = file.fileId;
                }else {
                    fileId = file.response.data.fileId;
                }
                delete this.fileMap[fileId];
            },
            handlePreview(file) {
                console.log(file);
            },
        },
        created() {
        },
        mounted() {
        }
    }

</script>

<style scoped>

</style>
